<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :append-to-body="true"
    class="xs-common-dialog-size"
    width="530px"
    @closed="handleClose">
    <SectionTitle title="文件导入" font-size="16px" style="margin-bottom:20px;"/>
    <el-radio-group v-if="!isContract" v-model="uploadType">
      <template v-for="item in uploadConfig">
        <el-radio v-if="item.isShow" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
      </template>
    </el-radio-group>
    <OrderUpload
      :import-api="getUploadAttribute('importApi')"
      :accept="accept"
      custom-error
      style="padding: 14px 0;"
      @handleSuccess="handleSuccess"
      @handleError="handleError" />
    <div class="dialog-footer">
      <ExportButton
        :export-api="getUploadAttribute('exportApi')"
        :export-name="getUploadAttribute('name') + '模板'"
        :query-data="setExtendParams"
        is-diy>
        <span v-if="!isContract" class="active-btn">{{ getUploadAttribute('name') + '模板下载' }}</span>
        <span v-if="uploadType === 1" style="margin-left: 4px">建议：导出需要编辑的订单，编辑后导入即可</span>
      </ExportButton>
      <span v-if="uploadType === 0" class="active-btn" @click="goLogPage">查看导入记录</span>
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '@/components/Title';
import ExportButton from '@/components/ExportButton';
import OrderUpload from '@/components/OrderList/orderUpload';
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
export default {
  name: 'UploadDialog',
  components: { ExportButton, OrderUpload, SectionTitle },
  props: {
    isContract: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: '.xls, .xlsx'
    }
  },
  data() {
    return {
      dialogVisible: false,
      uploadType: 0
    };
  },
  computed: {
    uploadConfig() {
      return [
        { id: 0, name: '订单导入', importApi: '/admin/order/batch/import', exportApi: 'admin/order/template/export', isShow: hasRouteAuth('crm:orderList:import') },
        { id: 1, name: '导入编辑', importApi: '/admin/order/importAudit', exportApi: 'admin/order/template/export', isShow: hasRouteAuth('crm:orderList:batchUpload') },
        { id: 2, name: '所有成本导入', importApi: '/admin/order/cost/import', exportApi: 'admin/order/allCostTemplate/download', isShow: hasRouteAuth('crm:orderList:allCostImport') },
        { id: 3, name: '微任务成本导入', importApi: '/admin/order/micro/import', exportApi: 'admin/order/microTemplate/download', isShow: hasRouteAuth('crm:orderList:microCostImport') }
      ];
    },
    setExtendParams() {
      switch (this.uploadType) {
        case 0:
          return { type: 1 };
        case 1:
          return { type: 2 };
        default:
          return null;
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    dialogShow() {
      this.uploadType = 0;
      this.dialogVisible = true;
    },
    getUploadAttribute(val) {
      const currUploadItem = this.uploadConfig.find(item => item.id === this.uploadType);
      return this.isContract ? 'admin/contract/batch/import' : currUploadItem[val];
    },
    handleSuccess() {
      this.handleClose();
      if (this.uploadType === 0) {
        this.$router.push({
          name: this.isContract ? 'contractUpload' : 'orderupload',
          query: { type: this.isContract ? 2 : this.uploadType }
        });
      } else {
        this.$message.success('导入成功');
        this.$emit('uploadList');
      }
    },
    handleError(msg) {
      this.handleClose();
      let message = msg;
      if (/\r\n/g.test(message)) {
        message = message.split('\r\n').map(item => {
          return '<span style="display:inline-block;max-width:1000px;">' + item + '</span>';
        }).join('<br/>');
      }
      showModal(message);
    },
    goLogPage() {
      const routeUrl = this.$router.resolve({
        name: this.isContract ? 'contractUpload' : 'orderupload',
        query: { type: this.isContract ? 2 : this.uploadType }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-radio__label {
    font-size: 14px;
  }
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.active-btn {
  color: #406eff;
  cursor: pointer;
}
</style>
